<template>
    <div>
        <el-dialog title="上机题" style="background: #F0F0F0" width="80%" :close-on-click-modal="false" :close-on-press-escape="false"  :visible.sync="value" :show-close="false" :center="true">
            <el-form ref="form" :model="upper" :rules="rules" label-position="right" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="chapterId" label="所属章节" :rules="[{required:true,message:'请选择所属章节',trigger:'change'}]">
                            <el-cascader-panel  v-model="upper.chapterId" :options="schoolList" :props="{emitPath:false,value:'id',label:'name',children:'children'}">
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.name }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader-panel>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="sourced" label="试题来源">
                            <el-radio-group v-model="upper.sourced">
                                <el-radio label="1">课程试题</el-radio>
                                <el-radio label="2">面试宝典</el-radio>
                                <el-radio label="3">企业真题</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="companyId" label="企业名称" :style="{'display':sourcedHiddenValue}" error="请选择企业" :required="(upper.sourced && upper.sourced.includes('3')) ? true : false">
                            <el-select v-model="upper.companyId" clearable filterable style="margin-right:10px" placeholder="请选择企业">
                                <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in companyList"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="upperContent" label="试题题干">
                            <el-input :minlength="2" :maxlength="300" show-word-limit type="textarea" v-model="upper.upperContent" placeholder="请输入上机题题干"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="upperUrl" label="试题资料">
                            <el-upload
                                    ref="upload"
                                    name="file"
                                    :limit="1"
                                    :auto-upload="false"
                                    class="upload-demo"
                                    list-type="text"
                                    :file-list="fileList"
                                    :headers="{'token': token()}"
                                    drag
                                    action="http://47.97.77.138:56700/upper/upload"
                                    :on-success="uploadSuccess"
                                    :on-exceed="uploadExceed"
                                    :on-change="uploadChange"
                                    :on-error="uploadError"
                            >
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text"><em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传zip文件，且不超过50MB</div>
                            </el-upload>
                        </el-form-item>

                    </el-col>
                </el-row>
            </el-form>
            <template slot="footer">
                <el-button type="info" @click="value = false" icon="el-icon-bell">取消</el-button>
                <el-button type="success" @click="handleSubmit" v-loading.fullscreen.lock="fullscreenLoading" icon="el-icon-plus">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>

    import { getChapterChildrenBySchool } from "@/api/academic/school";

    import { getToken } from '@/utils/tool';


    import { saveUpper } from "@/api/academic/upper";

    export default {
        name:'upper-child',
        data(){
            return {
                fullscreenLoading:false,
                upper: {},
                fileList:[],
                sourcedHiddenValue:"none",
                value: false,
                schoolList:[],
                companyList:[
                    {id:'1',name:'张三的公司'},{id:'2',name:'李四的公司'}
                ],
            }
        },
        watch:{
            value(data){
                if(data){
                    getChapterChildrenBySchool().then(res=>{
                        this.schoolList = res.data.data;
                    });

                    if(this.$refs.upload && this.$refs.upload.uploadFiles){
                        this.$refs.upload.uploadFiles = []; //清空未上传的文件列表
                    }

                }
            },
            'upper.sourced'(data){
                if(data && data == '3'){
                    this.sourcedHiddenValue = 'block';
                }else{
                    this.sourcedHiddenValue = 'none';
                }
            }
        },
        methods:{
            uploadSuccess(response,file,filelist){ //response中有该上机题的id 通过id进行表单数据的修改
                if(response.success){
                    this.upper.id = response.data.id;
                    this.upper.type = '4';
                    saveUpper(this.upper).then(res=>{
                        this.$message({
                            type:res.data.success ? 'success' : 'error',
                            message: res.data.message
                        });
                        this.fullscreenLoading = false;
                        this.value = false;
                        this.$parent.getUpperList(this.$parent.params);
                    });
                }
            },
            uploadError(err,file,fileList){
                this.$message.error(file.name + "文件上传失败");
                return false;
            },
            uploadExceed(){
                this.$message.error("上传的文件超出了限定了个数");
                return false;
            },
            uploadChange(file,fileList){

                if( !(file.raw.type === 'application/x-zip-compressed')){
                    this.$refs.upload.uploadFiles = [];
                    this.$message.error("只能上传ZIP文件");
                    return false;
                }
                if(file.size / 1024 / 1024 > 200){
                    this.$refs.upload.uploadFiles = [];
                    this.$message.error("上传的文件不能超过200MB");
                    return false;
                }
            },
            token(){
                return getToken();
            },
            handleSubmit(){
                if(!this.upper.chapterId){
                    this.$message.error("请选择章节");
                    return false;
                }

                this.$refs['form'].validate(valid=>{
                    if(valid){

                        if(this.$refs.upload.uploadFiles.length != 1){
                            this.$message.error("请选择文件");
                            return false;
                        }

                        this.$confirm("文件一旦提交,该上机题所有信息将无法修改,你确定提交吗?","友情提示",{type:'warning'}).then(()=>{
                            this.fullscreenLoading = true;
                            this.$refs.upload.submit();
                        });
                    }else{
                        return false;
                    }
                });

            }
        },
        props:{
            disciplineRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            sourcedRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            upperContentRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            upperAnalysisRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            }
        },
        computed:{
            rules(){
                return {
                    discipline: this.disciplineRule,
                    sourced: this.sourcedRule,
                    upperAnalysis:this.upperAnalysisRule,
                    upperContent:this.upperContentRule
                }
            }
        }
    }
</script>
<style scoped>

</style>